<template>
  <ul class="responsive-menu" ref="ulRef">
    <template v-for="(menuItem, idx) in menuArr" :key="idx">
      <li v-if="idx === 0" class="first-menu">
        <a :href="menuItem.url">{{ menuItem.title }}</a>
        <div class="first-submenu flex flex-col">
          <div class="flex flex-row w-[1280px] m-auto">
            <dl v-for="child in menuItem.children" class="flex flex-col">
              <dt class="text-xs font-bold my-4">
                {{ child.title }}
              </dt>
              <dd class="cursor-pointer">
                <NuxtImg :src="child.iconUrl" class="w-[300px] h-[300px]" />
              </dd>
            </dl>
          </div>
        </div>
      </li>
      <li v-else>
        <a :href="menuItem.url">{{ menuItem.title }}</a>
        <ol v-if="hasChildren(menuItem)">
          <li v-for="(child, pos) in menuItem.children" :key="`${idx}-${pos}`">
            <a :href="child.url">{{ child.title }}</a>
          </li>
        </ol>
      </li>
    </template>
  </ul>
</template>

<script setup lang="ts">
import type { ArtopgroupResponsiveMenuItem } from "./index.d.ts";
const props = withDefaults(
  defineProps<{
    menuArr?: ArtopgroupResponsiveMenuItem[];
  }>(),
  {
    menuArr: () => [],
  }
);

function hasChildren(menuItem: ArtopgroupResponsiveMenuItem) {
  return menuItem.children && menuItem.children.length > 0;
}

const ulRef = ref<HTMLUListElement>();
const ulHeight = ref<string>("0");
function calcUlDomHeight() {
  const ulDom = ulRef.value;
  if (ulDom) {
    ulHeight.value = `${ulDom.offsetHeight}px`;
  }
}
onMounted(() => {
  calcUlDomHeight();
});
</script>

<style scoped lang="scss">
.responsive-menu {
  height: 100%;
  display: flex;
  flex-direction: row;
  li {
    font-size: 12px;
    a {
      display: block;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    &:hover {
      > a {
        background-color: rgb(231, 68, 68);
        color: white;
      }
    }
  }
  ol li:hover {
    a {
      background-color: rgb(226, 221, 221);
      color: black;
    }
  }
  > li {
    position: relative;
    height: 100%;
    > a {
      padding: 0 10px;
    }
    ol {
      position: absolute;
      top: 100%;
      left: 0;
      visibility: hidden;
      z-index: 10;
      transition: all 0.3s;
      opacity: 0;
      transform: translateY(10%);
      background-color: white;
      border-radius: 0 0 3px 3px;
      > li {
        > a {
          padding: 15px 10px;
        }
        cursor: pointer;
        min-width: 200px;
      }
    }
    &:hover {
      ol {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
      }
    }
    &:last-child {
      ol {
        right: 0;
        left: initial;
      }
    }
  }
  > li.first-menu {
    .first-submenu {
      background-color: white;
      position: fixed;
      left: 0;
      right: 0;
      top: v-bind(ulHeight);
      visibility: hidden;
      transition: all 0.3s;
      opacity: 0;
      transform: translateY(10%);
      padding-bottom: 30px;
      padding-left: 30px;
    }
    &:hover {
      .first-submenu {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
      }
    }
  }
}
</style>
